<template>
	<view class="zh-user-center-password">
		<view class="header">
			<image :src="IMG_URL + '/auth/auth_top.jpg'" class="auth-top"/>
			<view class="box">
				<view class="logo">
					<image :src="IMG_URL + '/auth/logo_icon.png'" class="logo-icon"/>
				</view>
				<text class="font-36 font-FFFFFF mt-30 display-block">欢迎登录 中恒e纺</text>
			</view>
		</view>
		<view class="content">
			<view class="tags display-flex align-end">
				<view class="item active">
					<text>找回密码</text>
				</view>
			</view>
			<view class="username display-flex align-center">
				<image src="@/static/icons/telephone_icon.png" class="user-icon"/>
				<input value="" placeholder="输入手机号码" class="ml-30" placeholder-class="font-28"/>
			</view>
			<view class="vertify display-flex justify-between align-center">
				<view class="display-flex align-center">
					<image src="@/static/icons/verify_icon.png" class="vertify-icon"/>
					<input value="" placeholder="请输入验证码" class="ml-30" placeholder-class="font-28"/>
				</view>
				<view @click="handleSendVerify">
					<text class="font-1769ff font-28">发送验证码</text>
				</view>
			</view>
			<view class="password display-flex justify-between align-center">
				<view class="display-flex align-center">
					<image src="@/static/icons/password_icon.png" class="password-icon"/>
					<input v-model="passwordData.password" placeholder="请设置密码（数字+字母，6-12位字符）" class="ml-30" placeholder-class="font-28"/>
				</view>
				<view @click="handleLookPassword">
					<image src="@/static/icons/look_active_icon.png" class="look-active-icon" v-if="lookPassord"/>
					<image src="@/static/icons/look_icon.png" class="look-icon" v-else/>
				</view>
			</view>
			<view class="password-btn">
				<button class="app-primary-button" hover-class="app-primary-button-active" @click="handleEditPassword">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'

	import { IMG_URL } from '@/utils/constant'
	const lookPassord = ref(true)
	const handleLookPassword = () => {
		lookPassord.value = !lookPassord.value
	}
	
	const passwordData = reactive({
		username:'',
		password:'',
	})
	
	const handleSendVerify = () => {
		
	}
	
	const handleEditPassword = () => {
		
	}
</script>

<style lang="scss" scoped>
	.zh-user-center-password {
		padding-bottom:80rpx;
		background-color: $uni-bg-card-color;
		.header {
			width:100%;
			height: 396rpx;
			text-align:center;
			background-color: #e5e5e5;
			position: relative;
			.auth-top {
				width: 100%;
				height:396rpx;
				position: absolute;
				top:0;
				left:0;
				right:0;
			}
			.box {
				position:relative;
				padding-top: 94rpx;
				.logo {
					width: 104rpx;
					height: 104rpx;
					background-color: #fff;
					border-radius: 15rpx;
					text-align: center;
					margin: 0 auto;
					.logo-icon {
						width: 72rpx;
						height: 72rpx;
						margin-top:16rpx;
					}
				}
			}
		}
		.content {
			padding:43rpx 60rpx;
			.tags {
				margin-bottom:50rpx;
				.item:nth-child(2) {
					margin-left: 36rpx;
				}
				.item {
					font-size:30rpx;
					&.active {
						font-weight: bold;
						color:$uni-color-primary;
						font-size: 46rpx;
					}
					
				}
			}
			.username,.password, .vertify {
				padding:25rpx 0;
				border-bottom: 1rpx solid $uni-border-color;
			}
			.user-icon {
				width: 32rpx;
				height: 35rpx;
			}
			.vertify-icon {
				width: 35rpx;
				height:26rpx;
			}
			.password-icon {
				width: 30rpx;
				height: 36rpx;
			}
			.look-icon {
				width: 45rpx;
				height: 16rpx;
			}
			.look-active-icon {
				width: 45rpx;
				height: 28rpx;
			}
			.password-btn {
				margin-top:50rpx;
				button {
					width:630rpx;
				}
			}
		}
	}
</style>

